
/* 全局样式设置 */
body{
    /* 设置页面背景 */
    background-color: #181818;

    /* 定义css变量：统一管理颜色，后续可通过如：var(--primary)引用 */
    --primary:#30f1ff;
    --secondary:#202020;

}

/* 应用容器样式 */
#app{
    /* 应用背景 */
    background-color: #3f3f3f;
    /* 文字默认颜色 */
    color: #aaa;
    /* 固定宽度 */
    width: 800px;
    /* 固定高度 */
    height: 550px;
    /* 上下边距 ，auto水平居中*/
    margin: 40px auto;
    /* 圆角边框 ：数值越大越圆*/
    border-radius: 10px;
    /* 内边距 */
    padding: 20px 30px;

}

/* 标题样式 */
#app h1{
    color: var(--primary);
    /* margin: 50px ; */
    /* 设置下划线：底部添加浅灰色边框 */
    border-bottom: #aaa 1px solid;
    /* 标题与下划线之间的距离 */
    padding-bottom: 15px;

}

/* 控制面板样式 */
#controls{
    /* 弹性框 */
    display: flex;
    /* 子元素两端对齐，中间自动分配空间 */
    justify-content: space-between;
    /* 上下边距 */
    margin: 30px 0;

}

/* 棋盘和按键样式 */
#board{
    /* 表格单元格之间的间距 */
    /* border-spacing仅对表格有效，用于创建单元格之间的间隙 */
    border-spacing: 5px;
}

/* 棋盘首行和末行样式 */
/* 首行 */
#board tr:first-child td{
    color: #555
}

/* 按键样式 */
#board .key{
    /* 按键宽度 */
    width: 35px;
    /* 高度 */
    height: 35px;
    /* 圆角 */
    border-radius: 4px;
    /* 背景 */
    background-color: white;
    /* 鼠标悬停是显示手型指针 */
    cursor: pointer;
}

#board .key:hover{
    /* 鼠标悬停显示阴影 */
    box-shadow: 0 0 8px #ddd;

}
#board .key.active{
    background-color: var(--primary);
}

#board tr:last-child td{
    color: #555;
}

/* 末行 */
#board tr:last-child td.active{
    color: white;
    /* 加粗 */
    font-weight: bold;
}
